import React,{useEffect,useState} from 'react';
import { Table, Button, DatePicker, notification, Input, Modal, Card, Form,Select } from 'antd'
import { useNavigate } from 'react-router-dom';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import ExportJsonExcel from 'js-export-excel';
import { classes_list,classes_del,classes_search,classes_update } from '../../../../api/classesApi/api';
import './Classes.scss'


function Classes(props) {
    const { Search } = Input
    const [form] = Form.useForm()
    var [classes,setClass] = useState([])
    var [searchList,setSearch] = useState([])
    var navigate = useNavigate()
    useEffect(()=>{
        classes_list().then((res)=>{
            console.log(res.data);
            setClass(res.data)
        })
    },[])
    var routerAdd = ()=>{
       navigate('/index/checknav/addclass')
    }
    // 删除信息
    var del = (record)=>{
     classes_del(record.id).then((res)=>{
        console.log(res.data);
        notification.success({message:'删除信息成功'})
     })
     classes_list().then((res)=>{
        setClass(res.data)
    })
    }
    // 搜索信息
   var onSearch = (val)=>{
     if(val == ''){
        notification.info({message:'搜索信息不能为空'})
     }else{
        classes_search({classes:val}).then((res)=>{
            console.log(res.data);
            setSearch(res.data)
        })
     }

   }
    //编辑考勤信息
    const { Option } = Select;
    var ngvigate = useNavigate()
    const config = {
        rules: [
          {
            type: 'object',
            required: true,
            message: 'Please select time!',
          },
        ],
      };
    var [time2, setTime2] = useState({})
    var change2 = (value) => {
      console.log(value);
      setTime2(value)
    }
    const [isModalOpen, setIsModalOpen] = useState(false);
    var onFinish = (values)=>{
          console.log(values);
        classes_update({id:value.id,classes:values.classes,worktime:values.worktime,classtype:values.classtype,people:values.people,lastupdate: time2.$y + '-' + (time2.$M + 1) + '-' + time2.$D + ' ' + time2.$H + ' : ' + time2.$m}).then((res)=>{

            console.log(res.data);
            notification.success({message:'修改班次信息成功'})
        })
        classes_list().then((res)=>{
            setClass(res.data)
        })
    }
    const showModal = () => {
        form.resetFields();
        setIsModalOpen(true);
      };
    var [value,setValue] = useState({})
    var edit = (record)=>{
      console.log(record);
      setValue(record)
      showModal()
    }
      const handleOk = () => {
        setIsModalOpen(false);
        form.submit();
      };
    
      const handleCancel = () => {
        form.resetFields();
        setIsModalOpen(false);
        
      };
      const onGenderChange = (value) => {
        console.log(value);
        
      };
    
       // 导出数据的方法
       var downloadFileToExcel = ()=>{
        const datas=classes ? classes : '';//表格数据
        var option={};
        let dataTable = [];
        if (datas) {
            datas.map((item)=>{   
                let obj = {
                  classes:item.classes,
                  classtype:item.classtype,
                  worktime:item.worktime,
                  lastupdate:item.lastupdate,
                  people:item.people
                }
                dataTable.push(obj);
                return dataTable
            })
         
          }
          option.fileName = '考勤表信息'
          option.datas=[
            {
              sheetData:dataTable,
              sheetName:'sheet',
              sheetFilter:['classes','classtype','worktime','lastupdate','people'],
              sheetHeader:['班次名称','班次类型','出勤时长','更新时间','负责人'],
            }
          ];
          var toExcel = new ExportJsonExcel(option); 
          toExcel.saveExcel(); 
      }
  //决定了每一列渲染什么数据
  const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        render: (text, record, index) => `${index + 1}`
    },
    {
        title: '默认班次',//表格列的名字(显示在表格头上)
        key: 'classes',
        dataIndex: 'classes',//数据对应的属性名

    },
    {
        title: '班次类型',
        dataIndex: 'classtype',
        key: 'classtype',

    },
    {
        title: '出勤时长',
        dataIndex: 'worktime',
        key: 'worktime',

    },
    {
        title: '更新时间',
        dataIndex: 'lastupdate',
        key: 'lastupdate',

    },
    {
        title:'操作人',
        dataIndex:'people',
        key:'people'
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record, key) => (
            <>
                <FormOutlined className='edit' onClick={() => { edit(record) }} />
                <DeleteOutlined className='del' onClick={() => { del(record) }} />
            </>
        )
    }
]
classes = searchList.length == 0 ? classes : searchList
return (
    <div className='classes'>
         {/* <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
            <Breadcrumb.Item>账号管理</Breadcrumb.Item>
            <Breadcrumb.Item>管理员列表</Breadcrumb.Item>
        </Breadcrumb> */}
         <Card title="班次管理" bordered={false} >
        {/* 表格组件 */}
        {/* columns 表格每一列如何渲染 */}
        {/* dataSource 表格的数据源 */}
        <div className='button'>
        <Search style={{ width: 300, marginRight: 20 ,marginLeft: 20 }} placeholder="输入分组名称" enterButton onSearch={onSearch}  />
            <Button type="primary" onClick={routerAdd}>新增班次 +</Button>
            <Button type='primary' onClick={downloadFileToExcel}>导出</Button>
        </div>
        <Modal title="修改班次信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true}>
          <Form
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            onFinish={onFinish}
            // 绑定form实例
            form={form}
          >
            <Form.Item
                     label="默认班次"
                     name="classes"
                     rules={[{ required: true, message: '输入班次名称' }]}
                     initialValue={value.classes}
                 >
                     <Input placeholder='输入班次名称'/>
                 </Form.Item>
                 <Form.Item
                     label="出勤时长"
                     name="worktime"
                     rules={[{ required: true, message: '输入出勤时长' }]}
                     initialValue={value.worktime}
                 >
                     <Input placeholder='输入出勤时长'/>
                 </Form.Item>
                 <Form.Item
                     label="班次类型"
                     name="classtype"
                     rules={[{ required: true, message: '' }]}
                     initialValue={value.classtype}
                 >
                    <Select
                      placeholder="Select a option"
                      allowClear
                      onChange={onGenderChange}
                    >
                      <Option value="固定班制">固定班制</Option>
                      <Option value="排班制">排班制</Option>
                      <Option value="自由班制">自由班制</Option>
                    </Select>
                 </Form.Item>
                 <Form.Item
                     label="负责人"
                     name="people"
                     rules={[{ required: true, message: '输入负责人名称' }]}
                     initialValue={value.people}
                 >
                     <Input placeholder='输入负责人名称'/>
                 </Form.Item>
                <Form.Item name="lastupdate" label="修改更新时间" {...config}>
                  <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={change2} />
                </Form.Item>
          </Form>
        </Modal>
            <Table columns={columns} dataSource={ classes } />
         </Card>
    </div>
);
}

export default Classes;